<template>
    <div>
        <!-- 头部图片 -->
        <div class="child-header f-cen">
            <img src="../assets/images/contatti/contatti-top.jpg" />
            <div class="mask"></div>
            <div class="box">
                <div class="header-title animate__animated animate__bounceInDown">
                    <div class="title1">Contattaci</div>
                    <div class="title2">Get in touch!</div>
                </div>
            </div>
        </div>
        <!-- 主体 -->
        <div class="main">
            <div class="main-title c">
                Bio-T
                <br />Techonologies for Life
            </div>
            <div
                class="main-text c"
            >Per maggiori informazioni sui nostri dispositivi, i nostri corsi o gli eventi non esitate a contattarci!</div>
            <div class="main-info f-bet">
                <div class="item f">
                    <div class="icon f-cen">
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                    </div>
                    <div class="textbox">
                        <div class="textbox-title">Address</div>
                        <div class="textbox-text">
                            Via A. Baldovinetti, 81
                            00142 Roma
                        </div>
                    </div>
                </div>
                <div class="item f">
                    <div class="icon f-cen">
                        <el-icon>
                            <PhoneFilled />
                        </el-icon>
                    </div>
                    <div class="textbox">
                        <div class="textbox-title">Phone</div>
                        <div class="textbox-text">
                            <a href="#" class="link">+3906.83086609 +393278566369</a>
                        </div>
                    </div>
                </div>
                <div class="item f">
                    <div class="icon f-cen">
                        <el-icon>
                            <Printer />
                        </el-icon>
                    </div>
                    <div class="textbox">
                        <div class="textbox-title">Fax</div>
                        <div class="textbox-text">+39 06.83391913</div>
                    </div>
                </div>
                <div class="item f">
                    <div class="icon f-cen">
                        <el-icon>
                            <message />
                        </el-icon>
                    </div>
                    <div class="textbox">
                        <div class="textbox-title">Email</div>
                        <div class="textbox-text">
                            <a href="#" class="link">
                                ingegneria@biot.it
                                <br />bio-t@pec.it
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-content f">
                <div class="left">
                    <div class="title c">Dove siamo</div>
                    <div class="img">
                        <img src="../assets/images/contatti/viabaldovinetti.png" alt />
                    </div>
                </div>
                <div class="right">
                    <div class="title c">Get in touch!</div>

                    <div class="form">
                        <el-form :model="form">
                            <el-form-item>
                                <el-input v-model="form.name" placeholder="Nome e Cognome*" />
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="form.name" placeholder="Email*" />
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="form.name" placeholder="Telefono" />
                            </el-form-item>
                            <el-form-item>
                                <el-input
                                    v-model="form.name"
                                    placeholder="Seleziona tipo richiesta"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-input
                                    v-model="form.desc"
                                    type="textarea"
                                    :autosize="{ minRows: 4 }"
                                    placeholder="Dettagli richiesta"
                                />
                            </el-form-item>

                            <div class="clause f">
                                <input type="checkbox" /> Dichiaro di aver preso visione dell'Informativa Privacy in ottemperanza al GDPR/2018
                            </div>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">INVIA MESSAGGIO</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}
</script>

<style lang="less" scoped>
.child-header {
    img {
        object-position: bottom;
    }
    .header-title {
        float: right;
        text-align: right;
    }
}

.main {
    max-width: @box-width+100;
    margin: auto;
    padding: 50px;
    &-title {
        font-size: 34px;
        font-weight: 600;
        color: @text-title;
    }
    &-text {
        font-size: 24px;
        font-weight: 600;
        color: @text-bg;
        margin: 15px auto;
    }
    &-info {
        width: 100%;
        .item {
            width: 25%;
            height: 100px;
            padding: 0 25px;
            margin: 30px 0;
            .icon {
                color: #fff;
                background-color: @bg2;
                font-size: 20px;
                min-width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 10px;
            }
            .textbox {
                &-title {
                    font-weight: 600;
                    color: @text-title;
                    margin-bottom: 10px;
                }
                &-text {
                    font-size: 14px;
                    color: @text-main;
                    .link {
                        font-weight: 400;
                    }
                }
            }
        }
    }
    &-content {
        // height: 500px;
        .title {
            font-weight: 600;
            font-size: 24px;
            color: @text-title;
            margin-bottom: 30px;
        }
        .left {
            width: 50%;
            padding: 30px;
            margin-right: 20px;
            background-color: @bg4;
            .img {
                height: 100%;
                width: 100%;
                img {
                    width: 100%;
                }
            }
        }
        .right {
            width: 50%;
            padding: 30px;
            margin-left: 20px;
            background-color: @bg4;
            .el-button {
                background-color: @bg2;
                border: none;
                border-radius: 0;
            }
            &:deep(.el-input__inner:focus) {
                box-shadow: 0 0 0 1px @bg2 !important;
            }
            &:deep(.el-textarea__inner:focus) {
                box-shadow: 0 0 0 1px @bg2 !important;
            }
            .clause {
                font-size: 12px;
                align-items: center;
                margin-bottom: 20px;
            }
        }
    }
}
</style>